<script setup lang="tsx">
import { defineProps, ref, watch, defineEmits } from 'vue';
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';

// 接收父组件传入的 props，并设置默认值
const props = defineProps<{
  tableData?: Array<Record<string, any>>;
  tableColumnConfig?: Array<{
    prop?: string;
    label?: string;
    width?: string;
    sortable?: boolean;
    formatter?: (value: any) => string;
    fixed?: boolean | string;
    type?: any;
    render?: (scope: any) => JSX.Element | null;
    actions?: Array<{
      label?: string;
      type?: string;
      action?: string;
      render?: (scope: any) => JSX.Element | null;
    }>;
  }>;
  total: number;
  currentPage: number;
  pageSize: number;
  height?: string | number;
  border?: boolean;
}>();

// 定义 emit
const emit = defineEmits([
  'updatePage',
  'updatePageSize',
  'rowSelectionChange',
  'actionClick',
]);

// 创建本地状态
const localCurrentPage = ref(props.currentPage);
const localPageSize = ref(props.pageSize);

// 监听 props 的变化，将值同步到本地状态
watch(
  () => props.currentPage,
  (newPage) => {
    localCurrentPage.value = newPage;
  }
);

watch(
  () => props.pageSize,
  (newSize) => {
    localPageSize.value = newSize;
  }
);

// 监听分页变化
const handlePageChange = (page: number) => {
  localCurrentPage.value = page; // 更新本地状态
  emit('updatePage', page); // 发射事件
};

// 监听每页条数变化
const handlePageSizeChange = (size: number) => {
  localPageSize.value = size; // 更新本地状态
  emit('updatePageSize', size); // 发射事件
};

// 监听多选/单选变化
const handleSelectionChange = (selectedRows: any[]) =>
  emit('rowSelectionChange', selectedRows);
</script>

<template>
  <div class="table-container">
    <ElTable
      :data="props.tableData"
      style="width: 100%"
      :height="props.height || 300"
      :border="props.border"
      @selection-change="handleSelectionChange"
    >
      <template
        v-for="column in props.tableColumnConfig"
        :key="column.prop || column.label"
      >
        <ElTableColumn
          v-if="column.type === 'index'"
          type="index"
          :label="column.label"
          :width="column.width || 50"
        />
        <ElTableColumn
          v-else-if="column.type === 'selection'"
          type="selection"
          :width="column.width || 55"
        />
        <ElTableColumn
          v-else-if="column.type === 'radio'"
          type="radio"
          :width="column.width || 55"
        />
        <ElTableColumn
          v-else
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :sortable="column.sortable"
        >
          <template #default="scope">
            <component v-if="column.render" :is="column.render(scope)" />
            <span v-else>{{ scope.row[column.prop!] || '--' }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn
          v-if="column.type === 'action'"
          :label="column.label"
          fixed="right"
        >
          <template #default="scope">
            <template
              v-for="action in column.actions"
              :key="action.label || action.action"
            >
              <component
                :is="action.render ? action.render(scope) : 'span'"
                @click="() => emit('actionClick', action.action, scope.row)"
              >
                {{ action.label }}
              </component>
            </template>
          </template>
        </ElTableColumn>
      </template>
    </ElTable>

    <ElPagination
      v-model:current-page="localCurrentPage"
      v-model:page-size="localPageSize"
      :page-sizes="[10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.total"
      @size-change="handlePageSizeChange"
      @current-change="handlePageChange"
      class="fixed-pagination"
    />
  </div>
</template>

<style scoped lang="scss">
.table-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 占满可用高度 */
}

.fixed-pagination {
  margin-top: 20px;
  align-self: flex-end; /* 确保分页器在底部 */
}
</style>
